<template>
	<cover-view class="mask" @touchmove.stop>
		<cover-view class="x-loading">
			<cover-view class="before"></cover-view>
			<cover-view class="after"></cover-view>
		</cover-view>
	</cover-view>
</template>
<script setup lang="ts">
</script>
<style lang="scss" scoped>
.mask {
	position: fixed;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	background: rgba(255, 255, 255, 0.5);
	z-index: 1000;
	display: flex;
	justify-content: center;
	align-items: center;
}

.x-loading {
	width: 150px;
	height: 150px;
	background-color: #FFFFFF;
	border-radius: 20px;
	position: relative;
	transform: rotate(45deg);
}

.x-loading .before,
.x-loading .after {
	position: absolute;
	top: 50%;
	left: 50%;
	display: block;
	width: 0.5em;
	height: 0.5em;
	border-radius: 0.25em;
	transform: translate(-50%, -50%);
}

.x-loading .before {
	animation: before8 2s infinite;
}

.x-loading .after {
	animation: after6 2s infinite;
}

@keyframes before8 {
	0% {
		width: 0.5em;
		box-shadow: 1em -0.5em var(--xl-danger-light-3), -1em 0.5em var(--xl-primary-light-3);
	}

	35% {
		width: 2.5em;
		box-shadow: 0 -0.5em var(--xl-danger-light-3), 0 0.5em var(--xl-primary-light-3);
	}

	70% {
		width: 0.5em;
		box-shadow: -1em -0.5em var(--xl-danger-light-3), 1em 0.5em var(--xl-primary-light-3);
	}

	100% {
		box-shadow: 1em -0.5em var(--xl-danger-light-3), -1em 0.5em var(--xl-primary-light-3);
	}
}

@keyframes after6 {
	0% {
		height: 0.5em;
		box-shadow: 0.5em 1em var(--xl-success-light-3), -0.5em -1em var(--xl-warning-light-3);
	}

	35% {
		height: 2.5em;
		box-shadow: 0.5em 0 var(--xl-success-light-3), -0.5em 0 var(--xl-warning-light-3);
	}

	70% {
		height: 0.5em;
		box-shadow: 0.5em -1em var(--xl-success-light-3), -0.5em 1em var(--xl-warning-light-3);
	}

	100% {
		box-shadow: 0.5em 1em var(--xl-success-light-3), -0.5em -1em var(--xl-warning-light-3);
	}
}
</style>